import React, { useState,useEffect } from 'react';
import './yxhw.css';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile'
import axios from 'axios'

const TabLikeComponent = () => {
    const navigate = useNavigate();                                                          
    const [activeIndex, setActiveIndex] = useState(0);//存储点击分类的索引
    const [catename, setcatename] = useState('手环');//存储所点击分类的名字
    const tabTitles = ['手环', '体脂秤', '血压计']; //分类
    //点击分类
    const diancate = (item, index) => {
        setActiveIndex(index)
        setcatename(item)
    }

    //获取列表数据
    const [list, setlist] = useState([])
    const getlist = () => {
        axios.get(`http://localhost:3000/chen_getlists?name=${catename}`).then(res => {
            setlist(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [catename])
    return (
        <div style={{background:'white',height:'100%'}}>
            <NavBar onBack={() => navigate(-1)} className='yan'>严选好物</NavBar>
            <ul className='yxhw-ul'>
                {tabTitles.map((item, index) => {
                    return (
                        <li key={index} className={index === activeIndex ? 'yxhw-active' : ''} onClick={() => {diancate(item, index)}}>
                            {item}
                        </li>
                    )
                })}
            </ul>
            <div style={{position:"fixed",top:'1.6rem',left:'0',right:'0',bottom:'0',overflow:'auto'}}>
                {list.map((item, index) => {
                    return (
                        <div key={index} className='list-div4'>
                            <img src={item.img} alt="" className='list-img4' />
                            <div>
                                <p>{item.name}</p>
                                <p className='list-p4'>{item.name}{item.name}{item.name}</p>
                                <p className='list-p4'>
                                    <span className='list-span2'>￥{item.xprice}</span>
                                    <span className='list-span4'>马上抢</span>
                                </p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
};

export default TabLikeComponent;